<template>
	<view class="situation">
		<xbd-pages-content title="园区态势">
			<template #content>
				<view class="content">
					<!-- 人员通行分析 -->
					<view class="people">
						<xbd-title title="人员通行分析"></xbd-title>
						<view class="total">
							<view class="card blue">
								<image class="icon" src="../../static/situation/into.png" mode=""></image>
								<view class="msg font_color">
									<view class="nums"><text>{{person.in  | priceFormat(0,'',true)}}</text>人次</view>
									<view class="tags">今日入园</view>
								</view>
							</view>
							<view class="card blue2">
								<image class="icon" src="../../static/situation/leave.png" mode=""></image>
								<view class="msg font_color">
									<view class="nums"><text>{{person.out  | priceFormat(0,'',true)}}</text>人次</view>
									<view class="tags">今日出园</view>
								</view>
							</view>
						</view>
						<view class="chart1">
							<chart-super-twoline-area :chartData="personnelInformation" ></chart-super-twoline-area>
						</view>
					</view>

					<!-- 车辆通行分析  -->

					<view class="car">
						<xbd-title title="车辆通行分析"></xbd-title>
						<view class="total">
							<view class="card blue">
								<image class="icon" src="../../static/situation/car.png" mode=""></image>
								<view class="msg font_color">
									<view class="nums"><text>{{vehicle.in  | priceFormat(0,'',true)}}</text>车次</view>
									<view class="tags">今日入园</view>
								</view>
							</view>
							<view class="card green">
								<image class="icon" src="../../static/situation/car.png" mode=""></image>
								<view class="msg font_color">
									<view class="nums"><text>{{vehicle.out  | priceFormat(0,'',true)}}</text>车次</view>
									<view class="tags">今日出园</view>
								</view>
							</view>
						</view>
						<view class="chart1">
							<chart-super-twobar :chartData="vehicleInformation" ></chart-super-twobar>
						</view>
					</view>

					<!-- 访客预约统计分析 -->

					<view class="visitors">
						<xbd-title title="访客预约统计分析"></xbd-title>

						<view class="banner">
							<image class="banner_icon" src="../../static/situation/people.png" mode=""></image>
							<view class="banner_centre">
								今日预约人数
							</view>
							<view class="banner_right">
								{{visitor  | priceFormat(0,'',true)}} <text>人次</text>
							</view>
						</view>

						<view class="day">
							<view>
								日期选择：
							</view>
							<view class="day_centre">
								{{type}}
							</view>
							<view>
								<!--  #ifdef APP-PLUS || H5 -->
								<easy-select
									style=" box-sizing: border-box; width: 180rpx; heght: 32px ; font-size: 24rpx ; padding-left: 20rpx; border-color:#E9ECF7;"
									size="mini" :options="typeArr" v-model="type" @selectOne="select"></easy-select>
								<!-- #endif -->
								<!-- #ifndef APP-PLUS || H5 -->
								<xbd-select  :carId.sync="type" :option.sync="option" :visible.sync="visible" :infoList="typeArr" @selectChoose="searchList" >
									<template>
										<view class="select" @click="visible = true">
											<text> {{type || '请选择'}} </text>
											<image class="image" src="@/static/images/health/right.svg" mode=""></image>
										</view>
									</template>
								</xbd-select>
								<!-- #endif -->

							</view>
						</view>
						<view class="chart1">
							<chart-super-line-area  :chartData="visitorAppointment"></chart-super-line-area>
						</view>

					</view>

					<!-- 安防告警统计分析 -->

					<view class="alarm">
						<xbd-title title="安防告警统计分析"></xbd-title>
						<view class="total">
							<view :class="['card', 'choose', tabActive === '0' ? 'active' : '' ]" @click="clickMonth">
								<image class="icon" src="../../static/situation/safety.png" mode=""></image>
								<view class="msg">
									<view class="nums"><text>{{security.month  | priceFormat(0,'',true)}}</text>次</view>
									<view class="tags">近一月告警次数</view>
								</view>
							</view>
							<view :class="['card', 'choose', tabActive === '1' ? 'active' : '' ]" @click="clickYear">
								<image class="icon" src="../../static/situation/safety.png" mode=""></image>
								<view class="msg">
									<view class="nums"><text>{{security.year  | priceFormat(0,'',true)}}</text>次</view>
									<view class="tags">近半年告警次数</view>
								</view>
							</view>
						</view>
						<view class="chart2">
							<chart-super-pie :chartData="securityAlarm"></chart-super-pie>
						</view>
					</view>

					<!-- 智能设备概况 -->

					<view class="equipment">
						<xbd-title title="智能设备概况"></xbd-title>
						<view class="body">
							<view class="box" v-for="(item,index) in equipment" :key='index'>
								<view class="body_msg">
									<image v-if="item.name ==='车辆闸机'" class="body_icon" src="../../static/situation/equipment1.png" mode="">
									<image v-else-if="item.name ==='人员闸机' " class="body_icon" src="../../static/situation/equipment2.png" mode="">
									<image v-else-if="item.name ==='摄像头' " class="body_icon" src="../../static/situation/equipment3.png" mode="">
									</image>
									<view class="centre">
										{{item.name}}
									</view>
									<text>{{item.total}}</text>
								</view>
								<view class="num">
									<view class="state">
										<view class="round1">
											正常
										</view>
										<view class="">
											{{item.good}}
										</view>
									</view>
									<view class="state">
										<view class="round2">
											离线
										</view>
										<view class="">
											{{item.leave}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { Situation } from '@/api/index.js';
	export default {
		data() {
			return {
				visible:false,
				showBox:'0',
				tabActive: '0',
				type: '近七天',
				equipment:[],
				option:'day',
				person:{
					in:0,
					out:0
				},
				vehicle:{
					in:0,
					out:0
				},
				visitor:0,
				security:{
					month:0,
					year:0
				},
				typeArr: [{
						value: '0',
						label: '近七天',
						option :'day'
					},
					{
						value: '1',
						label: '近一月',
						option :'month'
					},
					{
						value: '2',
						label: '近半年',
						option :'year'
					}
				],
				personnelInformation: {
					name: ['入园人次', '出园人次'],
					unit: ['人','人'],
					color: ['#457AFF', '#A0BCFE'],
					shape: 'smooth',
					x: 'x',
					y: ['y', 'series'],
					data: []
				},
				vehicleInformation: {
					name: [ '入园车次','出园车次'],
					unit: ['辆','辆'],
					color: ['#457AFF','#39D4D1'],
					shape: 'smooth',
					x: 'x',
					y: ['y', 'series'],
					data: []
				},

				visitorAppointment: {
					name: '预约人数',
					unit:'人',
					color: '#457AFF',
					x: 'x',
					y: 'y',
					data: []
				},
				securityAlarm:{
					unit:'次',
					data: [
						{
						grade: "较低",
						num: 0,
						const: 'const'
						},
						{
						grade: "一般",
						num: 0,
						const: 'const'
						}, 
						{
						grade: "紧急",
						num: 0,
						const: 'const'
						},
						{
						grade: "非常紧急",
						num: 0,
						const: 'const'
						}
					]
				}
			};
		},
		methods: {
			searchList(){
				this.getPeople()
			},
			select(res) {
				this.type = res.label
				this.option =  res.option
				this.getPeople()
			},
			//预约人数日期切换数据更新
			async getPeople(){
				const info = {
					type:'visitor',
					option:this.option
				}
				this.$showLoading('加载中');
				try {
					const res= await Situation.getChartList(info)
					this.visitorAppointment.data =res.data.chart
					
					uni.hideLoading(); 
				}catch(e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			clickMonth() {
				if(this.tabActive !== '0'){
					this.tabActive = '0'
					this.option = 'month'
					this.getSecurity()
				}
			},
			clickYear() {
				if(this.tabActive !== '1'){
					this.tabActive = '1'
					this.option = 'year'
					this.getSecurity()
				}
			},
			//安防数据更新
			async getSecurity(){
					const info = {
						type:'security',
						option:this.option
					}
				this.$showLoading('加载中');
				try {
					const res= await Situation.getChartList(info)
					this.securityAlarm.data[0].num =res.data.chart.low
					this.securityAlarm.data[1].num =res.data.chart.normal
					this.securityAlarm.data[2].num =res.data.chart.urgent
					this.securityAlarm.data[3].num =res.data.chart.emergency
					uni.hideLoading(); 
				}catch(e) {
					uni.hideLoading();
					console.log(e);
				}
				
			},
			// 初始化数据
			async init() {
				const list = [
					Situation.getNumberType('person'),
					Situation.getNumberType('vehicle'),
					Situation.getNumberType('visitor'),
					Situation.getNumberType('security'),
					Situation.getChartList({type :'person'}),
					Situation.getChartList({type :'vehicle'}),
					Situation.getChartList({type :'visitor', option:'day'}),
					Situation.getChartList({type :'security', option:'month'}),
					Situation.getChartList({type :'device'}),
				]
				this.$showLoading('加载中');
				Promise.all(list).then( res =>{
					uni.hideLoading();
					this.person = res[0].data.count;
					this.vehicle = res[1].data.count;
					this.visitor = res[2].data.count;
					this.security = res[3].data.count;
					this.personnelInformation.data =res[4].data.chart
					this.vehicleInformation.data =res[5].data.chart
					this.visitorAppointment.data =res[6].data.chart 
					this.securityAlarm.data[0].num =res[7].data.chart.low
					this.securityAlarm.data[1].num =res[7].data.chart.normal
					this.securityAlarm.data[2].num =res[7].data.chart.urgent
					this.securityAlarm.data[3].num =res[7].data.chart.emergency
					this.equipment =res[8].data.chart
				}).catch( err =>{
					// this.$showToast(err);
				})

			},

		},
		onLoad(){
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
xbd-title{
	margin-bottom: 10px;
}
	.people,
	.car,
	.visitors,
	.alarm {
		padding: 20px 50rpx;
		background-color: #FFFFFF;
		margin-bottom: 5px;

		.num {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			height: 18px;
			line-height: 18px;
			color: #194769;
			margin-top: 20px;

			.centre {
				margin: 0px 20rpx;
				flex: 1;
				height: 9px;
				border-bottom: 1px dashed #999999;

			}

			.right {
				color: #457AFF;
				font-size: 36rpx;

				text {
					margin-left: 10rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
		.select{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 240rpx;
			height: 28px;
			line-height: 28px;
			border-radius: 8rpx;
			border: 1px solid #E9ECF7;
			box-sizing: border-box;
			padding: 0 20rpx 0 40rpx;
			.image{
				transform: rotate(90deg);
				width: 38rpx;
				height: 38rpx;
			}
		}
		.total {
			display: flex;
			justify-content: space-between;
			margin: 20px 0;
			
			.card {
				position: relative;
				box-sizing: border-box;
				padding: 10px 20rpx;
				width: 300rpx;
				border-radius: 8rpx;

				.icon {
					position: absolute;
					top: 8px;
					left: 20rpx;
					width: 88rpx;
					height: 88rpx;
				}

				.msg {
					float: right;
					text-align: center;
					font-size: 28rpx;

					.nums {
						text {
							font-size: 36rpx;
							margin-right: 10rpx;
						}
					}

					.tags {
						margin-top: 2px;
					}
				}

				.font_color {
					color: #FFFFFF;
				}
			}

			.blue {
				background-color: #457AFF;
			}

			.blue2 {
				background-color: #A0BCFE;
			}

			.green {
				background-color: #39D4D1;
			}

			.choose {
				background-color: rgba(69, 122, 255, .1);
				color: #394954;
				border: 1px solid #FFFFFF;
				&.active {
					box-sizing: border-box;
					border: 1px solid #457AFF;
					color: #457AFF;
					border-bottom: 3px solid #457AFF;
				}
			}
		}

		.banner {
			display: flex;
			height: 60px;
			background: url(../../static/images/common/bluebg.png) no-repeat;
			background-size: 100% 100%;
			align-items: center;
			font-size: 32rpx;
			border-radius: 8rpx;
			color: #FFFFFF;
			box-sizing: border-box;
			padding: 0 20rpx 0 30rpx;
			margin-top: 20px;

			.banner_icon {
				width: 72rpx;
				height: 24px;
			}

			.banner_centre {
				margin-left: 34rpx;
				flex: 1;
			}

			.banner_right {
				font-size: 40rpx;

				text {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.day {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			margin: 20px 0;

			.day_centre {
				font-size: 28rpx;
				color: #394954;
			}
		}
	}



	.equipment {
		padding: 20px 50rpx;
		background-color: #FFFFFF;
		margin-bottom: 5px;

		.body {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 20px;
			.box {
				width: 300rpx;
				box-sizing: border-box;
				padding: 12rpx 24rpx 12rpx 12rpx;
				background-color: rgba(69, 122, 255, .3);
				border: 1px solid #457AFF;
				border-radius: 8rpx;
				margin-bottom: 20px;

				.body_msg {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					margin-bottom: 10px;
					color: #394954;

					.body_icon {
						width: 50rpx;
						height: 50rpx;
					}

					.centre {
						flex: 1;
						margin-left: 20rpx;
						font-size: 28rpx;
					}
				}

				.num {
					display: flex;
					font-size: 32rpx;
					padding-left: 20rpx;

					.state {
						flex: 1;
						text-align: center;

						.round1 {
							position: relative;
							font-size: 24rpx;
							margin-top: 3px;

							&::before {
								content: "";
								display: block;
								position: absolute;
								top: 3px;
								left: 10rpx;
								border-radius: 10rpx;
								width: 20rpx;
								height: 20rpx;
								background-color: #39D4D1;
							}
						}

						.round2 {
							position: relative;
							font-size: 24rpx;
							margin-top: 3px;
							color: #FF7543;

							&::before {
								content: "";
								display: block;
								position: absolute;
								top: 3px;
								left: 10rpx;
								border-radius: 10rpx;
								width: 20rpx;
								height: 20rpx;
								background-color: #FF7543;
							}
						}

					}
				}
			}
		}
	}

	.chart1{
		height: 180px;
		width: 720rpx;
		box-sizing: border-box;
		margin-left:-40rpx;
	}
	.chart2 {
		height: 300px;
		box-sizing: border-box;
		margin-left:-40rpx;
	}
</style>
